<script>
import Footer from '../components/Footer.vue'
import axios  from "axios";
export default {
  name: 'Register',
  data(){
    return{
      user:{
        username:'', // 对应后端的username字段
        password:'',
        firstName:'', // 对应后端的firstName字段
        lastName:'', // 对应后端的lastName字段
        gender:'1', // 对应后端的gender字段
        authorities: ['USER'] // 默认选择普通用户权限
      },
      confirmPassword:'',
      availableRoles: [
        { value: 'USER', label: '普通用户' },
        { value: 'BUSINESS', label: '商家' }
      ]
    }
  },
  methods:{
    async register(){
      if(this.user.password!=''&&this.user.password!=this.confirmPassword){
        alert('两次输入的密码不一致');
        return;
      }
      if(this.user.username==''){
        alert('用户名不能为空');
        return;
      }
      // const token = sessionStorage.getItem('jwt');
      //注册请求 - 使用支持权限分配的接口
      const response = await axios.post('/persons', this.user, {
        headers: {
          'Content-Type': 'application/json',
          // 'Authorization': `Bearer ${token.slice(1,-1)}`  // 添加认证令牌
        }
      });
      if (response.status === 200 || response.status === 201) {
        alert("注册成功");
        // 3秒后自动返回
        setTimeout(() => {
          router.go(-1);
        }, 3000);
      }
    },
  },
  components: {
    Footer,
  }
}
</script>

<template>
  <div class="wrapper">
    <!--header部分-->
    <header>
      <p>用户注册</p>
    </header>

    <!--表单部分-->
    <ul class="form-box">
      <li>
        <div class="title">
          用户名：
        </div>
        <div class="content">
          <input type="text" v-model="user.username" placeholder="用户名">
        </div>
      </li>
      <li>
        <div class="title">
          密码：
        </div>
        <div class="content">
          <input type="password" v-model="user.password" placeholder="密码">
        </div>
      </li>
      <li>
        <div class="title">
          确认密码：
        </div>
        <div class="content">
          <input type="password" v-model="confirmPassword" placeholder="确认密码">
        </div>
      </li>
      <li>
        <div class="title">
          姓名：
        </div>
        <div class="content">
          <input type="text" v-model="user.firstName" placeholder="姓名">
        </div>
      </li>
      <li>
        <div class="title">
          性别：
        </div>
        <div class="content" style="font-size: 3vw;">
          <input type="radio" v-model="user.gender" value="1" style="width: 6vw;height: 3.2vw;">男
          <input type="radio" v-model="user.gender" value="0" style="width: 6vw;height: 3.2vw;">女
        </div>
      </li>
      <li>
        <div class="title">
          用户类型：
        </div>
        <div class="content" style="font-size: 3vw;">
          <select v-model="user.authorities[0]" style="width: 100%; height: 4vw; font-size: 3vw;">
            <option v-for="role in availableRoles" :key="role.value" :value="role.value">
              {{ role.label }}
            </option>
          </select>
        </div>
      </li>
    </ul>

    <div class="button-login">
      <button @click="register">注册</button>
    </div>

    <!--底部菜单部分-->
    <Footer></Footer>
  </div>
</template>

<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;
}

/*header*/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*表单部分*/
.wrapper .form-box{
  width: 100%;
  margin-top: 12vw;
}
.wrapper .form-box li{
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}
.wrapper .form-box li .title{
  flex: 0 0 18vw;/*代表不缩小，不放大，固定18vw*/
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}
.wrapper .form-box li .content{
  flex: 1;/*代表占剩余空间*/
}
.wrapper .form-box li .content input{
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
.wrapper .button-login{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-login button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  border: none;
  outline: none;
  color: #fff;
  background-color: #38CA73;
  border-radius: 4px;
}
.wrapper .button-register{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-register button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  border: none;
  outline: none;
  color: #666;
  background-color: #EEE;
  border-radius: 4px;
  border: solid 1px #DDD;
}

</style>